<template>
  <el-row>
    <el-col>
      <el-form size="mini" label-width="80px" class="clearfix">
        <el-col :lg="7" :md="6" :sm="6" :xs="12">
          <el-form-item label="对方单位名称" label-width="120px">
            <el-input v-model="filter_info.con_name" placeholder="输入搜索"/>
          </el-form-item>
        </el-col>
        <el-col :lg="5" :sm="6" :xs="12" class="my-date-picker">
          <el-form-item label="合同编号" label-width="80px">
            <el-input v-model="filter_info.cp_name" placeholder="输入合同编号"/>
          </el-form-item>
        </el-col>
        <el-col :lg="5" :sm="6" :xs="12" class="my-date-picker">
          <el-form-item label="提交人" label-width="80px">
            <el-input v-model="filter_info.title" placeholder="输入提交人"/>
          </el-form-item>
        </el-col>
        <el-col :lg="5" :md="5" :sm="12" :xs="24">
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
            <el-button type="primary" size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-col>
    <el-col>
      <el-card>
        <v-table
          :editable="false"
          :deletable="false"
          :table-title="tableTitle"
          :table-data="tableData"
          :usable="true"
          btn-class="btn"
          @use="use"
        />
        <v-pagination
          :page-info="pageInfo"
          :get-table-list="getTableList"
        />
      </el-card>
    </el-col>
  </el-row>
</template>

<script>

export default {
  name: 'ContractSelect',
  data() {
    return {
      filter_info: {},
      tableTitle: [
        {
          cn: '对方单位名称',
          en: 'opposing_party_unit'
        },
        {
          cn: '合同编号',
          en: 'ct_number',
          width: '160px'
        },
        {
          cn: '客户名称',
          en: 'contact_person'
        },
        // {
        //   cn: '合同金额',
        //   en: 'money'
        // },
        {
          cn: '提交人',
          en: 'title'
        },
        {
          cn: '内容',
          en: 'procurement_contents'
        }
      ],
      tableData: [],

      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      }
    }
  },
  computed:{
    filter_infos() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (!this.filter_info[key] && this.filter_info[key] !== 0) {
          this.$delete(this.filter_info, key)
          continue
        }
        if (key === 'created_at') {
          data.startDate = origin[key][0]
          data.endDate = origin[key][1]
        } else {
          data[key] = origin[key]
        }
      }
      if (!origin.created_at) {
        delete data.start_time
        delete data.End_time
      }
      return data
    }
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    getTableList() {
      let datas = {
        ...this.filter_infos ,
        page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
      }

      this.$get('action/WzContract/dataGrid', datas)
        .then(res => {
          const list1 = res.data.list.map((item, index) => {
            const list2 = JSON.parse(item.form_component_values)
            const messages = JSON.parse(item.operation_records)
            const list4 = JSON.parse(item.tasks)
            const obj = {}
            list2.forEach(item => {
              let key = item.name
              let value = item.value === 'null' ? '' : item.value
              if (item.name === '合同条款') {
                key = '内容'
                value = JSON.parse(item.value)[0].rowValue[0].value || ''
              } else if (item.name === '附件') {
                value = item.value !== 'null' && JSON.parse(item.value)[0].fileName || ''
              }
              obj[key] = value
            })
            this.messages = messages.map(item => {
              const log_content = item.date + ',' + item.operation_result + ',' + item.operation_type + ',' + item.userid
              return { log_content }
            })
            for (const key in item) {
              obj[key] = item[key]
            }
            obj.tasks = list4
            obj.form_component_values = list2
            obj.title = obj.title.replace(/的合同审批/, '')
            return obj
          })
          this.pageInfo.totalPage = res.data.totalPage
          this.pageInfo.totalRow = res.data.totalRow

          this.tableData = this.convertData(list1)
        })
    },

    // 转换数据
    convertData(datas) {
      let result
      if (!datas.length) {
        return []
      } else {
        return datas.map(item => {
          item.notes = item.notes
          item.create_date = item.create_date
          item.update_date = item.update_date
          item.contractId = item.business_id
          item.ct_name = item.合同名称
          item.appendices = item.附件
          item.ct_number = item.合同编号
          item.opposing_party_unit = item.对方单位名称
          item.contact_person = item.客户名称
          item.procurement_contents = item.内容
          item.money = item.合同金额
          item.payment_status = item.status
          item.date_of_signing = item.date_of_signing
          item.due_date = item.due_date
          item.contract_status = item.contract_status
          item.signing_people = item.signing_people
          item.cycle = '60月'
          return item
        })
      }
    },

    use(val) {
      console.log(val, 'use')
      this.$emit('use', val)
    },

    // 搜索
    search() {
      this.pageInfo.pageNumber=1
      this.getTableList()
    },
    reset() {
      this.filter_info = {}
      this.getTableList()
    }
  }
}
</script>

<style scoped>

</style>
